<template>
  <div class="scrolling-list-container">
    <div class="list-wrapper">
      <vue-seamless-scroll
        v-if="deviceList.length > 20"
        :class-option="{ step: 0.4 }"
        :data="deviceList"
        class="warp"
      >
        <ul>
          <li
            v-for="(item, index) in deviceList"
            :data-index="index"
            :key="item.num"
          >
            <span class="content">{{ item.noticeTitle }}</span>
            <span class="time" style="float: right">{{ item.createTime }}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
      <ul v-else class="warp" style="padding: 10px 0">
        <li
          v-for="(item, index) in deviceList"
          :data-index="index"
          :key="item.num"
        >
          <span class="content">{{ item.noticeTitle }}</span>
          <span class="time" style="float: right">{{ item.createTime }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getDeviceListFold } from "@/api/device/device";
import { warningNotice } from "@/api/system/notice";
import Velocity from "velocity-animate";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "FactoryStation",
  data() {
    return {
      // You can define your data properties here
      deviceList: [],
      deviceCacheList: [],
      startNum: 0,
      endNum: 7,
      timer: null,
    };
  },
  props: {
    noticeType: {
      type: String,
      default: "1",
    },
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    statusFormat() {
      return (status) => {
        const statusMap = ["success", "danger", "waring", "info"];
        return statusMap[status] || "";
      };
    },
  },
  watch: {
    noticeType: {
      handler(newVal, oldVal) {
        this.translateList();
      },
    },
  },
  methods: {
    getWaringDevice() {
      warningNotice().then((res) => {
        this.deviceCacheList = res.data;
        this.translateList();
      });
    },
    translateList() {
      this.deviceList = [];
      this.deviceList = this.deviceCacheList.filter(
        (item) => item.noticeType == this.noticeType
      );
    },
    // You can define your methods here
    getdeviceList() {
      getDeviceListFold().then((res) => {
        this.deviceCacheList = res.rows;
        this.deviceList = this.deviceCacheList.slice(0, 6);
        if (this.deviceCacheList.length > this.endNum) {
          setInterval(() => {
            if (this.endNum > this.deviceCacheList.length) {
              this.startNum = 0;
              this.endNum = 7;
            }
            this.deviceList = this.deviceCacheList.slice(
              this.startNum,
              this.endNum
            );
            this.startNum++;
            this.endNum++;
          }, 1000);
        }
      });
    },
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.height = 0;
    },
    enter(el, done) {
      var delay = el.dataset.index * 150;
      setTimeout(function () {
        Velocity(el, { opacity: 1, height: "25px" }, { complete: done });
      }, delay);
    },
    leave(el, done) {
      var delay = el.dataset.index * 150;
      setTimeout(function () {
        Velocity(el, { opacity: 0, height: 0 }, { complete: done });
      }, delay);
    },
  },
  mounted() {
    // This hook will be called after the component is mounted
    // this.getdeviceList();
    this.getWaringDevice();
  },
};
</script>

<style lang="scss" scoped>
.warp {
  height: 436px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    li,
    a {
      display: block;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}
/* You can write your component-specific styles here */
.scrolling-list-container {
  padding: 0 14px;

  ul {
    list-style: none;
    padding-left: 0;

    li {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      overflow: hidden;
    }

    li:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}
</style>
